<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Savour - Facebook voting app</title>
        <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300' rel='stylesheet' type='text/css'>
            <link href="<?php echo base_url(); ?>style.css" type="text/css" rel="stylesheet"/>
            <link href="<?php echo base_url(); ?>reset.css" type="text/css" rel="stylesheet"/>
            <script type='text/javascript' src='<?php echo base_url(); ?>jquery.js'></script>
            <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
            <link href="<?php echo base_url(); ?>css/jquery-ui.css" type="text/css" rel="stylesheet"/>
            <script src="//connect.facebook.net/ja_JP/all.js"></script>
            <script type="text/javascript">
                $(document).ready(function() {
                    
                });
                var PopupOpen = false;
                if(top==self){
                    top.location.href = "<?php echo $this->config->item('redirect_uri_page'); ?>";
                }
                window.fbAsyncInit = function()  {
                    FB.init({
                        appId  : '132572970256339',
                        oauth  : true
                    });
                    FB.Canvas.setAutoGrow();
                };
                //FB.Canvas.scrollTo(0, 0);
                function actionVote(id,pid){
                    document.body.style.cursor = 'progress';
                    $.ajax({					  
                        url: "<?php echo base_url(); ?>index.php/welcome/addVote",					  
                        type: "GET",
                        data: {pid : pid},
                        dataType: "html",
                        success: function(data) {
                            FB.Canvas.getPageInfo(
                            function(info) {
                                $( "#dialog-thank" ).dialog({
                                    position: ['top', info.scrollTop+150],
                                    width: 347,
                                    modal: true,
                                    buttons: {
                                        Ok: function() {
                                            $( this ).dialog( "close" );
                                        }
                                    }
                                });
                            }
                        );
                            document.body.style.cursor = '';
                            $(id).hide();	
                        }					
                    });
                
                    //$(id).hide();
                }
                function show_desc(desc_id)
                {
                    $('#info').hide();
                    FB.Canvas.getPageInfo(
                    function(info) {
                        //alert('scrollTop: ' + info.scrollTop + ' Height: ' + info.clientHeight);
                        $('#info').css("top",info.scrollTop);
                    }
                );
                    var desc_product=$('#'+desc_id).html();
                    $('.group').html(desc_product);
                    $('#info').slideDown("slow",function(){
                        PopupOpen = true;
                    });
                }
                function closeInfo()
                {
                    if(PopupOpen == true)
                        $('#info').slideUp(function(){
                            PopupOpen = false;
                        });
                }
            </script>
    </head>

    <body>
        <div style="font-size: 14px;" id="dialog-thank" title="Thank you for voting">
            <p>
                Thank you for voting.Enjoy the recipes and try some at home !
            </p>
        </div>
        <div id="wrapper">
            <div id="info" style="display: none;">
                <div class="group">
                </div>
            </div><!--/#info-->
            <div id="header" onclick="closeInfo()">

            </div><!--/#header-->
            <div id="content" onclick="closeInfo()">
                <ul class="clear">
                    <?php
                    foreach ($products as $i => $product) {
                        ?>
                        <li>
                            <img src="<?php echo base_url() . $product->img_url; ?>" alt="" />
                            <div class="action">
                                <input type="button" name="info" class="btn-info" value="" onclick="PopupOpen = false;show_desc('<?php echo 'desc' . $product->product_id; ?>')"  style="cursor:pointer"/>
                                <?php
                                if (in_array($product->product_id, $voteds)) {
                                    
                                } else {
                                    ?>
                                    <input type="button" name="vote" class="btn-vote" value="" onclick="actionVote(this,<?php echo $product->product_id; ?>)" style="cursor:pointer"/>
                                    <?php
                                }
                                ?>
                            </div>
                            <h1 class="title"><a href="#"><?php echo $product->product_name; ?></a></h1>
                            <div id="desc<?php echo $product->product_id; ?>" style="display: none">
                                <h1><?php echo $product->product_name; ?></h1>
                                <img src="<?php echo base_url(); ?>images/close.png" alt="" style="float:right; margin-right:18px; margin-top:-22px;cursor: pointer" onclick="closeInfo()" style="cursor:pointer"/>
                                <div style="padding-top: 10px; width: 700px;">
                                    <?php echo $product->description; ?>
                                </div>

                            </div>
                        </li>
                    <?php } ?>
                </ul>

            </div><!--/#content-->
            <div class="clear"></div>
            <div id="footer">
                <span>Brought to you by</span>
                <img src="<?php echo base_url(); ?>images/footer-logo.png" alt="" />
                <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.savour.sg%2F&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=132572970256339" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 21px; width: 116px; float: left; margin-top: 15px;margin-left: 8px;" allowTransparency="true"></iframe>
            </div><!--/#footer-->
        </div><!--/#wrapper-->
    </body>
</html>
